<template>
  <div id="crosswise" class="col-md-12  col-sm-12 col-xs-12" style="height: 310px;" />
</template>

<script>
export default {
  name: 'LocationDistribution',
  data() {
    return {
      msg: 'fafa',
      crosswise: []
    }
  },
  mounted() {
    this.drawLine()
  },
  methods: {
    drawLine() {
      const myChart = this.$echarts.init(document.getElementById('crosswise'))
      myChart.setOption({
        title: {
          text: '停机时间排行'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {},
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          boundaryGap: [0, 0.01]
        },
        yAxis: {
          type: 'category',
          data: ['Brazil', 'Indonesia', 'USA', 'India', 'China', 'World']
        },
        series: [
          {
            type: 'bar',
            data: [18203, 23489, 29034, 104970, 131744, 630230]
          }
        ]
      })
    }
  }
}
</script>

<style scoped>

</style>
